import {WeaEchart } from 'ecCom';
import isEqual from 'lodash/isEqual';
import * as mobx from 'mobx';

export default class Main extends React.Component{
	constructor(props){
		super(props);
	}
	
	shouldComponentUpdate(nextProps,nextState) {
		return !isEqual(this.props.echartoption,nextProps.echartoption);
    }
	
	componentDidUpdate(){
		const reportEchart = this.refs.ReportEchart;
		if(reportEchart){
			reportEchart.paint();
		}
	}

    bindClickEvent(chart){
        if(chart) {
            const {clickEvent} = this.props;
            if(typeof(clickEvent) !== 'function'){
                chart.off('click');
            }else{
                chart.off('click');
                chart.on('click',function(e){
                    clickEvent && clickEvent(true,e.data);
                });
            }
        }
    }
	
	render(){
		const {echartoption} = this.props;
		const {width='100%',height = '400px'} = this.props;
		const echartStyle =  {"width":width,'height':height};
		return (
		 	<WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@kie0i5`} ref="ReportEchart" option={echartoption} useDefault={false} chartName={''} style={echartStyle} chartAction={this.bindClickEvent.bind(this)}/>
		)
	}
	
	getEchartId(){
		return this.refs.ReportEchart.chart.id;
	}
}
